<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/principal.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .coluna1 {  
                text-align: left;  
                white-space: nowrap;
            }  

            .coluna2 {  
                text-align: left;  
            }  

            .coluna3 {  
                text-align: left;  
                white-space: nowrap;
            }  

            .coluna4 {  
                text-align: left;  
            }  

            .ui-datatable .ui-datatable-header {
                text-align:right;
            }

            .actions td {
                border: 0px none !important;
                padding: 2px !important;
            }
        </style>

    </ui:define>

    <ui:define name="content" id="content">
        <h:form id="frmControle">
            <p:panel id="panel" header="Bem Vindo ao Controle Bancário">
                <p:growl id="messages" life="5000" />

                <!-- GEID CONTAS BANCARIAS -->
                <p:dataTable id="tabControle" widgetVar="wtabControle" var="controle" value="#{controleBancarioBean.lazyModel}" 
                             lazy="true" paginator="true" rows="12" paginatorPosition="top" filterEvent="enter"
                             emptyMessage="Nenhum Registro Retornado ..."  style="text-align: left">

                    <p:column headerText="Descrição" sortBy="#{controle.dscControle}" filterBy="#{controle.dscControle}">
                        <h:outputText value="#{controle.dscControle}" />
                    </p:column>

                    <p:column headerText="Conta Bancária" sortBy="#{controle.idConta.dscConta}" filterBy="#{controle.idConta.dscConta}">
                        <h:outputText value="#{controle.idConta.dscConta}" />
                    </p:column>

                    <p:column headerText="Data Emissão" sortBy="#{controle.datControle}" filterBy="#{controle.datControle}" style="text-align: center">
                        <h:outputText value="#{controle.datControle}">
                            <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Saldo Anterior">
                        <div style="text-align: right">
                            <h:outputText value="#{controle.vlrSaldoInicial}">
                                <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </div>
                    </p:column>

                    <p:column headerText="Crédito">
                        <div style="text-align: right">
                            <h:outputText value="#{controle.vlrCredito}">
                                <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </div>
                    </p:column>

                    <p:column headerText="Débito">
                        <div style="text-align: right">
                            <h:outputText value="#{controle.vlrDebito}">
                                <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </div>
                    </p:column>

                    <p:column headerText="Saldo Atual">
                        <div style="text-align: right">
                            <h:outputText value="#{controle.vlrSaldoFinal}">
                                <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </div>
                    </p:column>

                    <p:column style="width: 50px">
                        <h:panelGrid columns="4" styleClass="actions" cellpadding="0">
                            <p:commandButton id="selectButton" update=":frmControle:panel :frmControle:messages" 
                                             icon="ui-icon-search" title="Visualizar // Alterar Documento" oncomplete="PF('dialog').show()">
                                <f:setPropertyActionListener value="#{controle}" target="#{controleBancarioBean.selectedControleBancario}" />
                                <f:setPropertyActionListener value="#{false}" target="#{controleBancarioBean.salvar}" />
                            </p:commandButton>

                            <p:commandButton id="excluirButton" update=":frmControle:panel :frmControle:messages"
                                             icon="ui-icon-trash" title="Estornar Documento" oncomplete="PF('confirmation').show()">
                                <f:setPropertyActionListener value="#{controle}" target="#{controleBancarioBean.selectedControleBancario}" />
                            </p:commandButton>
                        </h:panelGrid>
                    </p:column>

                    <f:facet name="footer">
                        <div style="text-align: left;">
                            <p:commandButton id="incluirButton" actionListener="#{controleBancarioBean.novoDocumento}" 
                                             update=":frmControle:display :frmControle:messages" value="Novo Documento"
                                             icon="ui-icon-pencil" title="Cadastrar Novo Documento" oncomplete="PF('dialog').show()" />
                        </div>
                    </f:facet>
                </p:dataTable>

                <!-- MANUTENÇÃO CONTA BANCARIA -->
                <p:dialog id="detalheDialog" header="Detalhes Controle Bancário" widgetVar="dialog" resizable="true"
                          showEffect="explode" hideEffect="explode" position="top">

                    <p:panelGrid id="display" style="text-align: left;">
                        <p:row>
                            <p:column>
                                <h:outputText value="* Descrição:" />
                            </p:column>

                            <p:column>
                                <p:inputText id="inDescricao" value="#{controleBancarioBean.selectedControleBancario.dscControle}" style="width:500px; font-weight:bold;" />
                                <p:commandButton icon="ui-icon ui-icon-search" title="Pesquisar Tipo de Documento" process="@this" onclick="PF('documentoDialog').show()" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <h:outputText value="* Conta Bancária:" />
                            </p:column>

                            <p:column>
                                <p:inputText id="inConta" value="#{controleBancarioBean.selectedControleBancario.idConta.dscConta}" style="width:500px; font-weight:bold;" />
                                <p:commandButton icon="ui-icon ui-icon-search" title="Pesquisar Conta Bancária" process="@this" onclick="PF('contaDialog').show()" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <h:outputText value="* Tipo Lançamento:" />
                            </p:column>

                            <p:column>
                                <p:selectOneRadio id="options" value="#{controleBancarioBean.tipdoc}"> 
                                    <f:selectItem itemLabel="Crédito" itemValue="C" />  
                                    <f:selectItem itemLabel="Débito" itemValue="D" />
                                    <f:ajax event="change" render="display" listener="#{controleBancarioBean.verificaTipo()}"/>
                                </p:selectOneRadio>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <h:outputText value="Saldo Atual:" />
                            </p:column>

                            <p:column>
                                <p:inputText id="inSaldo" value="#{controleBancarioBean.selectedControleBancario.vlrSaldoInicial}" 
                                             readonly="true" style="font-weight:bold; text-align: right; width: 200px;">
                                    <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                                </p:inputText>
                                
                                <h:outputText value="            Altera Saldo da Conta Bancária: " style="font-weight:bold; text-align: right;" />  
                                <p:selectBooleanCheckbox value="#{controleBancarioBean.alterasaldo}" />
                            </p:column>
                        </p:row>

                        <p:row rendered="#{controleBancarioBean.credito}">
                            <p:column>
                                <h:outputText value="* Crédito:" />
                            </p:column>

                            <p:column>
                                <p:inputText id="inCredito" value="#{controleBancarioBean.selectedControleBancario.vlrCredito}" 
                                             style="font-weight:bold; text-align: right; width: 200px;"
                                             onkeyup="javascript:maskIt(this, event, '###.###.###,##', true)">
                                    <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                                </p:inputText>
                            </p:column>
                        </p:row>

                        <p:row rendered="#{controleBancarioBean.debito}">
                            <p:column>
                                <h:outputText value="* Débito:" />
                            </p:column>

                            <p:column>
                                <p:inputText id="inDebito" value="#{controleBancarioBean.selectedControleBancario.vlrDebito}" 
                                             style="font-weight:bold; text-align: right; width: 200px;"
                                             onkeyup="javascript:maskIt(this, event, '###.###.###,##', true)">
                                    <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                                </p:inputText>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <h:outputText value="Data Emissão:" />
                            </p:column>

                            <p:column>
                                <p:inputMask id="imDatEmissao" value="#{controleBancarioBean.selectedControleBancario.datControle}" mask="99/99/9999" 
                                             style="font-weight:bold; text-align: left; width: 150px;">
                                    <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                                </p:inputMask>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <h:outputText value="Centro de Custo:" />
                            </p:column>

                            <p:column>
                                <p:inputText id="inCusto" readonly="true" value="#{controleBancarioBean.selectedControleBancario.idCusto.dscCusto}" style="width:500px; font-weight:bold;" />
                                <p:commandButton icon="ui-icon ui-icon-search" title="Pesquisar Centro de Custo" 
                                                 process="@this" onclick="PF('custoDialog').show()" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <h:outputText value="Plano de Conta:" />
                            </p:column>

                            <p:column>
                                <p:inputText id="inPlano" readonly="true" value="#{controleBancarioBean.selectedControleBancario.idPlanoConta.nome}" style="width:500px; font-weight:bold;" />
                                <p:commandButton icon="ui-icon ui-icon-search" title="Pesquisar Plano de Contas" 
                                                 process="@this" onclick="PF('planoDialog').show()" />
                            </p:column>
                        </p:row>
                    </p:panelGrid>

                    <br />
                    <div style="text-align: left;">
                        <p:commandButton value="Salvar" update=":frmControle:panel :frmControle:messages :frmControle:tabControle" rendered="#{controleBancarioBean.salvar}"
                                         actionListener="#{controleBancarioBean.inserir}" oncomplete="handleFormRequest(xhr, status, args)" process="@all" />
                        <p:commandButton value="Salvar" update=":frmControle:panel :frmControle:messages :frmControle:tabControle" rendered="#{!controleBancarioBean.salvar}"
                                         actionListener="#{controleBancarioBean.alterar}" oncomplete="handleFormRequest(xhr, status, args)" process="@all" />
                    </div>
                </p:dialog>

                <!-- CONFIRMA EXCLUSAO -->
                <p:dialog header="Confirma o Estorno desse Documento?" widgetVar="confirmation">

                    <p:commandButton value="Sim" update=":frmControle:panel :frmControle:messages :frmControle:tabControle" oncomplete="PF('confirmation').hide(),PF('dialog').hide()"
                                     process="@form" actionListener="#{controleBancarioBean.excluir}" />
                    <p:commandButton value="Não" onclick="PF('confirmation').hide()" type="button" />

                </p:dialog>

                <!-- PESQUISA TIPO DE DOCUMENTO -->
                <p:dialog id="documentoDialog" header="Pesquisa Tipo de Documento" widgetVar="documentoDialog" resizable="true"
                          width="800" showEffect="explode" hideEffect="explode" position="right,top">

                    <p:dataTable id="tabTipoDocumento" widgetVar="wtabTipoDocumento" var="tipoDocumento" value="#{tipoDocumentoBean.lazyModel}" filterEvent="enter" 
                                 paginator="true" rows="5" lazy="true" emptyMessage="Nenhuma Categoria retornada ..." style="text-align: left;">

                        <f:facet name="header">
                            Pesquise e selecione Tipo de Documento
                        </f:facet>

                        <p:column headerText="Descrição" sortBy="#{tipoDocumento.dscDocumento}" filterBy="#{tipoDocumento.dscDocumento}">
                            <h:outputText value="#{tipoDocumento.dscDocumento}" />
                        </p:column>

                        <p:column style="width: 50px">
                            <p:panelGrid styleClass="actions" columns="1">
                                <p:commandButton id="selectButtonDocumento" update=":frmControle:display :frmControle:messages" 
                                                 icon="ui-icon-check" title="Selecionar Tipo de Documento" oncomplete="PF('documentoDialog').hide()">
                                    <f:setPropertyActionListener value="#{tipoDocumento.dscDocumento}" target="#{controleBancarioBean.selectedControleBancario.dscControle}" />
                                </p:commandButton>
                            </p:panelGrid>
                        </p:column>
                    </p:dataTable>

                </p:dialog>

                <!-- PESQUISA CENTRO DE CUSTO -->
                <p:dialog id="custoDialog" header="Pesquisa Centro de Custo" widgetVar="custoDialog" resizable="true"
                          width="800" showEffect="explode" hideEffect="explode" position="right,top">

                    <p:dataTable id="tabCentroCusto" widgetVar="wtabCentroCusto" var="centrocusto" value="#{centroCustoBean.lazyModel}" filterEvent="enter" 
                                 paginator="true" rows="5" lazy="true" emptyMessage="Nenhuma Categoria retornada ..." style="text-align: left;">

                        <f:facet name="header">
                            Pesquise e selecione Centro de Custo
                        </f:facet>

                        <p:column headerText="Centro de Custo" sortBy="#{centrocusto.dscCusto}" filterBy="#{centrocusto.dscCusto}" >
                            <h:outputText value="#{centrocusto.dscCusto}" />
                        </p:column>

                        <p:column headerText="Ativo">
                            <h:selectBooleanCheckbox value="#{centrocusto.tipStatus}" />
                        </p:column>

                        <p:column style="width: 50px">
                            <p:panelGrid styleClass="actions" columns="1">
                                <p:commandButton id="selectButtonCusto" update=":frmControle:display :frmControle:messages" 
                                                 icon="ui-icon-check" title="Selecionar Centro de Custo" oncomplete="PF('custoDialog').hide()">
                                    <f:setPropertyActionListener value="#{centrocusto}" target="#{controleBancarioBean.selectedControleBancario.idCusto}" />
                                </p:commandButton>
                            </p:panelGrid>
                        </p:column>
                    </p:dataTable>

                </p:dialog>

                <!-- PESQUISA PLANO DE CONTAS -->
                <p:dialog id="planoDialog" header="Pesquisa Plano de Conta" widgetVar="planoDialog" resizable="true"
                          width="1000" showEffect="explode" hideEffect="explode" position="right,top">

                    <p:dataTable id="tabPlanoConta" widgetVar="wtabPlanoConta" var="planoconta" value="#{planoContasBean.lazyModel}" filterEvent="enter" 
                                 paginator="true" rows="5" lazy="true" emptyMessage="Nenhuma Categoria retornada ..." style="text-align: left;">

                        <f:facet name="header">
                            Pesquise e selecione Conta Contábel
                        </f:facet>

                        <p:column headerText="Conta" filterBy="#{planoconta.numConta}">
                            <h:outputText value="#{planoconta.numConta}" />
                        </p:column>

                        <p:column headerText="Reduzido" filterBy="#{planoconta.reduzido}">
                            <h:outputText value="#{planoconta.reduzido}" />
                        </p:column>

                        <p:column headerText="Nome" filterBy="#{planoconta.nome}">
                            <h:outputText value="#{planoconta.nome}" />
                        </p:column>

                        <p:column headerText="Saldo Anterior" style="text-align: right;">
                            <h:outputText value="#{planoconta.saldoanterior}">
                                <f:convertNumber locale="pt_BR" pattern="#,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Débitos" style="text-align: right;">
                            <h:outputText value="#{planoconta.debitos}" >
                                <f:convertNumber locale="pt_BR" pattern="#,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Créditos" style="text-align: right;">
                            <h:outputText value="#{planoconta.creditos}">
                                <f:convertNumber locale="pt_BR" pattern="#,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Saldo Atual" style="text-align: right;">
                            <h:outputText value="#{planoconta.saldoatual}">
                                <f:convertNumber locale="pt_BR" pattern="#,##0.00" minFractionDigits="2" />
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Anal.">
                            <h:selectBooleanCheckbox value="#{planoconta.tipConta}" />
                        </p:column>

                        <p:column style="width: 50px">
                            <p:panelGrid styleClass="actions" columns="1">
                                <p:commandButton id="selectButtonPlanoConta" update=":frmControle:display :frmControle:messages" 
                                                 icon="ui-icon-check" title="Selecionar Conta Contábel" oncomplete="PF('planoDialog').hide()">
                                    <f:setPropertyActionListener value="#{planoconta}" target="#{controleBancarioBean.selectedControleBancario.idPlanoConta}" />
                                </p:commandButton>
                            </p:panelGrid>
                        </p:column>
                    </p:dataTable>

                </p:dialog>

                <!-- PESQUISA CONTA BANCARIA -->
                <p:dialog id="contaDialog" header="Pesquisa Conta Bancária" widgetVar="contaDialog" resizable="true"
                          showEffect="explode" hideEffect="explode" position="right,top" width="800">

                    <p:dataTable id="tabcontaBancaria" widgetVar="wtabcontaBancaria" var="contabancaria" value="#{contaBancariaBean.lazyModel}" filterEvent="enter"
                                 paginator="true" rows="5" lazy="true" emptyMessage="Nenhuma Categoria retornada ..." style="text-align: left;">

                        <f:facet name="header">
                            Pesquise e selecione Conta Bancária
                        </f:facet>

                        <p:column headerText="Banco" sortBy="#{contabancaria.idBanco.nomBanco}" filterBy="#{contabancaria.idBanco.nomBanco}">
                            <h:outputText value="#{contabancaria.idBanco.nomBanco}" />
                        </p:column>

                        <p:column headerText="Descrição" sortBy="#{contabancaria.dscConta}" filterBy="#{contabancaria.dscConta}">
                            <h:outputText value="#{contabancaria.dscConta}" />
                        </p:column>

                        <p:column headerText="Agecia" sortBy="#{contabancaria.numAgencia}" filterBy="#{contabancaria.numAgencia}">
                            <h:outputText value="#{contabancaria.numAgencia}" />
                        </p:column>

                        <p:column headerText="Conta" sortBy="#{contabancaria.numConta}" filterBy="#{contabancaria.numConta}">
                            <h:outputText value="#{contabancaria.numConta}" />
                        </p:column>

                        <p:column headerText="Saldo Inicial">
                            <div style="text-align: right">
                                <h:outputText value="#{contabancaria.vlrSaldoInicial}">
                                    <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                                </h:outputText>
                            </div>
                        </p:column>

                        <p:column style="width: 50px">
                            <p:panelGrid styleClass="actions" columns="1">
                                <p:commandButton id="selectButtonBancaria" update=":frmControle:display :frmControle:messages" 
                                                 icon="ui-icon-check" title="Selecionar Conta Bancária" oncomplete="PF('contaDialog').hide()">
                                    <f:setPropertyActionListener value="#{contabancaria}" target="#{controleBancarioBean.selectedControleBancario.idConta}" />
                                </p:commandButton>
                            </p:panelGrid>
                        </p:column>
                    </p:dataTable>

                </p:dialog>

            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>